{% extends "base.html" %}


{% block body %}

    <body class="text-center">
     <script>
        function deleteSelected() {
            const checkboxes = document.querySelectorAll('input[name="file_checkbox"]:checked');
            const selectedFiles = [];
            checkboxes.forEach(checkbox => {
                selectedFiles.push(checkbox.value);
            });
            if (selectedFiles.length > 0) {
                const formData = new FormData();
                selectedFiles.forEach(file => {
                    formData.append('file_names', file);
                });
                fetch('/delete_mp3', {
                    method: 'POST',
                    body: formData
                })
               .then(response => response.json())
               .then(data => {
                    if (data.status === 'success') {
                        location.reload();
                    }
                });
            }
        }

        function downloadSelected() {
            const checkboxes = document.querySelectorAll('input[name="file_checkbox"]:checked');
            const selectedFiles = [];
            checkboxes.forEach(checkbox => {
                selectedFiles.push(checkbox.value);
            });
            if (selectedFiles.length > 0) {
                const form = document.createElement('form');
                form.method = 'post';
                form.action = '/download_mp3';
                selectedFiles.forEach(file => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'file_names';
                    input.value = file;
                    form.appendChild(input);
                });
                document.body.appendChild(form);
                form.submit();
            }
        }
    </script>


     <div class="container mt-4">
        <h1 class="text-center">MP3 文件列表</h1>
        <div class="d-flex justify-content-center mb-3">
            <button class="btn btn-danger me-2" id="delete-selected" onclick="deleteSelected()">删除选中</button>
            <button class="btn btn-primary" id="download-selected" onclick="downloadSelected()">下载选中</button>
        </div>
        <ul class="list-group">
            {% for file in mp3_files %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <input type="checkbox" name="file_checkbox" value="{{ file }}">
                    <span>{{ file }}</span>
                    <a href="{{ url_for('static', filename='mp3/'+file) }}" download class="btn btn-secondary">下载</a>
                </li>
            {% endfor %}
        </ul>
    </div>
    </body>
{% endblock %}